<template>
	<view>
		<view class="plant-head">
			<view>{{orderData.VehicleType||''}}</view>
			<view class="car-info flex"><view>{{orderData.Mil}}公里</view></view>
		</view>
		<!-- 标签 -->
		<view class="content-box flex">
			<!-- 标签左边导航 -->
			<view class="left-nav">
				<scroll-view scroll-y class="scroll-view" >
					<block v-for="(item,index) in navList" :key='index'>
						<view class="nav-text f-center zcRelative" @tap="do_selectNav(item,index)" :class="navIndex==index?'nav-select':''"> {{item.Class1}} <view class="count f-center" v-if="item.SelectNumber>0">{{item.SelectNumber}}</view></view>
					</block>
				</scroll-view>
			</view>
			<!-- 标签右边选择 -->
			<view class="right-select flex1">
				<scroll-view scroll-y class="scroll-view">
					<block v-for="(item2,index2) in rightList" :key="index2">
						<view class="data-wrap">
							<view class="data-list">
								<view class="data-title">{{item2.Class2}}</view>
								<block v-for="(item,index) in item2.childs" :key="index">
									<view class="data-check f-side" @tap="do_select(item)">
										<view class="check-value zcOverflow3">{{item.Class3}}</view>
										<view class="iconfont icon-gouxuan11" :class="item.isSelect?'isSelect':''"></view>
									</view>
								</block>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				btn_disabled:false,
				navIndex:0,
				navList:[],
				reqClass1:[],
				rightList:[]
			}
		},
		props:{
			orderData:Object,
			cycleEditData:Object
		},
		created(){
			_this = this;
			_this.getOnlySelectItemModelClass1();
		},
		methods: {
			do_selectNav(item,index){ //标签选择左边
				_this.getOnlySelectItemModelClass2(item.Class1)
				_this.navIndex = index;
			},
			do_select(item){ //标签选择
				item.isSelect = !item.isSelect;
        _this.$emit("get_select",item)
			},
			getOnlySelectItemModelClass2(Class1){  //请求右边选择列表
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: 'getOnlySelectItemModelClass2',
						data: {
							Class1:Class1
						}
					},
					Callback:_this.cb_getOnlySelectItemModelClass2,
					Scope: _this
				})
			},
			cb_getOnlySelectItemModelClass2(resJson,scope){ //获取右边列表选择
				 	console.log("服务右边列表",resJson)
					if(resJson.success){
						_this.rightList = resJson.data;  
					}else{
						uni.showModal({
							title:'温馨提示',
							content: resJson.msg,
							showCancel:false
						})
					}
			},
			getOnlySelectItemModelClass1(reqClass){  //进场请求左边列表
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'Uni_Partner_Detail',
						Action: 'getOnlySelectItemModelClass1',
						Data: {
						}
					},
					Callback:_this.cb_getOnlySelectItemModelClass1,
					Scope: _this
				})
			},
			cb_getOnlySelectItemModelClass1(resJson,scope){ 
				 	console.log("服务左边列表",resJson)
					if(resJson.success){
						_this.navList = resJson.data;
						_this.getOnlySelectItemModelClass2(_this.navList[0].Class1)
					}else{
							uni.showModal({
								title:'温馨提示',
								content: resJson.msg,
								showCancel:false
							})
					}
			}
	
		}
	}
</script>

<style>
.plant-head{
	height: 120upx;
	background-color: #50ADFD;
	color: #fff;
	padding-left: 20upx;
}
.plant-head>view:first-child{
	font-size: 34upx;
	font-weight: 520;
	height: 52upx;
	line-height: 45upx;
}
.car-info{
	height: 40upx;
	line-height: 40upx;
}
.car-info .plant-time{
	margin-left: 40upx;
	position: relative;
}
.car-info .plant-time:before{
	content: '';
	height: 20upx;
	width: 1upx;
	position: absolute;
	left: -19upx;
	top:15upx;
	background-color: #fff;
}
.plant-bottom{
	height: 100upx;
	position: fixed;
	bottom: 0;
	width: 100%;
}
.plant-bottom>button{
	width: 100%;
	box-sizing: border-box;
	background: #50ADFD;
	border-radius: 0;
	color: #fff;
}
/* .plant-bottom>button:first-child{
	background-color: #E6E6E6;
	color: #333;
	border-left: 1upx solid #D8D8D8;
	border-top: 1upx solid #D8D8D8;
} */
/* 内容 */
.left-nav{
	flex: 0 0 180upx;
	background-color: #F0F0F0;
	height: 100%;

}
.left-nav .scroll-view,.right-select,.right-select .scroll-view{
 height: 100%;
}
.right-select{
	background-color: #fff;
}
.nav-text{
	height:100upx;
	width: 100%;
		padding:0 4upx 0 8upx;
}
.content-box{
	position: absolute;
	top: 120upx;
	bottom: 0;
	width: 100%;
	z-index: 889;
}
.nav-select{
	background-color: #fff;
}
.data-title{
	height: 80upx;
	line-height: 80upx;
	border-bottom: 1upx solid #e5e5e5;
	padding-left: 40upx;
	position: relative;
	background-color: #F0F0F0;
	border-left: 1upx solid #fff;
}
.data-title:before{
	content: '';
	position: absolute;
	width: 8upx;
	height: 26upx;
	left: 26upx;
	background-color: #62B6FD;
	top: 27upx;
	z-index: 100;
}
.icon-gouxuan11{ //未选择
	color:#ccc ;
	font-size: 36upx;
}
.isSelect{ //已选择
		color:#4EACFC;
}
.data-check{
	margin-left: 40upx;
	padding-right: 40upx;
	height: 80upx;
	line-height: 80upx;
	border-bottom: 1upx solid #e5e5e5;
}
.count{
	position: absolute;
	width: 20upx;
	height: 20upx;
	line-height: 20upx;
	font-size: 18upx;
	background: red;
	color: #fff;
	right: 30upx;
	top:10upx;
	border-radius: 50%;
}
.check-value{
	max-width: 430upx;
}
</style>
